<template>
<div>
  <h2>Checkbox 复选框</h2>
  <!-- 一组备选项中进行多选 -->
  <!-- 基础用法 单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍-->
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
  <!-- 在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true -->
  <br>
  <!-- 未选中boolean 的值为false -->
  <el-checkbox v-model="checked1">未选定备选项</el-checkbox>
  <br>
  <h2>禁用状态</h2>
  <!-- 设置disabled 属性即可 -->
  <el-checkbox v-model="checked2" disabled>备选项1</el-checkbox>
  <!-- checked 表示选中状态 true为选中 false 为未选中 -->
  <el-checkbox v-model="checked3" disabled>备选项</el-checkbox>
  <br>
  <h2>多选框组</h2>
  <!-- 适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项 -->
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
  <br>
  <h2>indeterminate 状态</h2>
  <!-- indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果 -->
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <!-- indeterminate 设置 indeterminate 状态，只负责样式控制 boolean类型 默认值flase -->
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" :min="1"
    :max="2">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
  <br>
  <br>
  <h2>按钮样式</h2>
  <div>
    <!-- 只需要把el-checkbox元素替换为el-checkbox-button元素即可 -->
    <el-checkbox-group v-model="checkboxGroup1">
      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
  </div>
  <div style="margin-top: 20px">
    <el-checkbox-group v-model="checkboxGroup2" size="medium">
      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
  </div>
  <div style="margin-top: 20px">
    <el-checkbox-group v-model="checkboxGroup3" size="small">
      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
  </div>
  <div style="margin-top: 20px">
    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
  </div>
  <!-- 带有边框的 -->
  <h2>带有边框的</h2>
  <div>
    <!-- 设置border属性可以渲染为带有边框的多选框 -->
    <el-checkbox v-model="checked4" label="备选项1" border></el-checkbox>
    <el-checkbox v-model="checked5" label="备选项2" border></el-checkbox>
  </div>
  <div style="margin-top: 20px">
    <el-checkbox v-model="checked6" label="备选项1" border size="medium"></el-checkbox>
    <el-checkbox v-model="checked7" label="备选项2" border size="medium"></el-checkbox>
  </div>
  <div style="margin-top: 20px">
    <el-checkbox-group v-model="checkboxGroup5" size="small">
      <el-checkbox label="备选项1" border></el-checkbox>
      <el-checkbox label="备选项2" border disabled></el-checkbox>
    </el-checkbox-group>
  </div>
  <div style="margin-top: 20px">
    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
      <el-checkbox label="备选项1" border></el-checkbox>
      <el-checkbox label="备选项2" border></el-checkbox>
    </el-checkbox-group>
  </div>
  
</div>
  
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';


// 定义数组
const cityOptions = ['上海', '北京', '广州', '深圳'];

@Component({ components: {}})
export default class Checkbox extends Vue {
   private checked: boolean = true;
   private checked1: boolean = false;
   private checked2: boolean = false;
   private checked3: boolean = true;
   private checked4: boolean = true;
   private checked5: boolean = false;
   private checked6: boolean = false;
   private checked7: boolean = true;
    // 绑定数组的数据
   private checkList: string[] =  ['选中且禁用', '复选框 A', '复选框 C'];
   private checkAll: boolean = false;
   private checkedCities: string[] =  ['上海', '北京'];
    // 返回数组数据
   private cities: string[] = cityOptions;
   private isIndeterminate: boolean = true;
   private  checkboxGroup1: string[] =  ['上海'];
   private checkboxGroup2: string[] =  ['上海'];
   private checkboxGroup3: string[] =  ['上海'];
   private  checkboxGroup4: string[] =  ['上海'];
   private  checkboxGroup5: string[] =  [];
   private  checkboxGroup6: string[] =  [];

  private handleCheckAllChange(val: boolean): void {
    this.checkedCities = val ? cityOptions : [];
    this.isIndeterminate = false;
  }
  private  handleCheckedCitiesChange(value: string[]): void {
    const checkedCount = value.length;
    this.checkAll = checkedCount === this.cities.length;
    this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
  }
}
</script>

<style>

</style>